<%@ page language="java" pageEncoding="utf-8" %>
<%
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="UTF-8">
    <title>${_systemName}</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html, body {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .bg {
            position: fixed;
            width: 100%;
            height: 100%;
            background: url('${_staticPath}/img/bg.png') 100% 100%;
            overflow: hidden;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }

        .img {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -35%);
            z-index: 999;
            overflow: hidden;
            text-align: center;
            height: 500px;
            width: 800px;
        }


        .img p {
            font-size: 20px;
            font-weight: 600;
        }

        .impowerBox .qrcode {
            width: 250px;
        }

        ._account {
            width: 100px;
        }

        .loginLeft {
            width: 340px;
            height: 400px;
            background: url('${_staticPath}/img/tupian.png') 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
            float: left;
        }

        #_captcha {
            width: 65%;
        }
    </style>
</head>
<body class="login-layout">
<div class="img">
    <%--    <p>欢迎登陆菠萝在线后台系统</p>--%>
    <div class="loginLeft"></div>
    <div id="loginRight" class="loginRight ">
        <p style="margin-top: 100px;font-size: 10px">菠萝在线后台系统<img src="${_staticPath}/img/2.0.png"></p>
        <div style="width: 70%;height:60%;margin: 0 auto;text-align:center">
            <form id="_loginForm" action="${_path}/login" method="post"
                  validate="true" vmessage="false">
                <input type="hidden" name="backUrl" id="backUrl" value="${backUrl}"/>
                <fieldset>
                    <label class="block clearfix form-group">
                        <div class="block input-icon input-icon-right help-validate">
                            <i class="ace-icon fa fa-user"></i>
                            <input id="_account" name="account" type="text"
                                   class="form-control form-data" placeholder="登录名"
                                   required="true" minlength='4'/>
                        </div>
                    </label>

                    <label class="block clearfix form-group">
                        <div class="block input-icon input-icon-right help-validate">
                            <i class="ace-icon fa fa-lock"></i>
                            <input id="_password" name="password" type="password"
                                   class="form-control form-data" placeholder="密码"
                                   required="true" minlength='6' maxlength='16'/>
                        </div>
                    </label>

                    <%--验证码--%>
                    <label class="block clearfix form-group">
                        <div class="block help-validate">
                            <input id="_captcha" name="captcha" type="text"
                                   placeholder="验证码"
                                   required="true" style="float: left"/>
                            <img alt="" src="${_path}/captcha" style="float: left">
                        </div>
                    </label>

                    <div class="space"></div>

                    <div class="clearfix">
                        <button id="_loginButton" type="button" class="width-60 pull-default btn btn-sm btn-danger">
                            <i class="ace-icon fa fa-key"></i>
                            <span class="bigger-110">立即登录</span>
                        </button>
                    </div>

                    <div class="space-4"></div>
                </fieldset>
            </form>
        </div>

    </div>


</div>
<div class="bg"></div>


<meta name="description" content="User login page"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link type="images/x-icon" rel="shortcut icon" href="${_staticPath}/custom/assets/favicon.ico">

<script type="text/javascript">
    var url = window.location.href;
    if (url.indexOf('${loginUrl}') == -1) {
        window.location.href = '${_path}${loginUrl}';
    }
</script>

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="${_staticPath}/assets/css/bootstrap.css"/>
<link rel="stylesheet" href="${_staticPath}/assets/css/font-awesome.css"/>

<!-- text fonts -->
<link rel="stylesheet" href="${_staticPath}/assets/css/ace-fonts.css"/>

<!-- ace styles -->
<link rel="stylesheet" href="${_staticPath}/assets/css/ace.css"/>

<!--[if lte IE 9]>
<link rel="stylesheet" href="${_staticPath}/assets/css/ace-part2.css"/>
<![endif]-->
<link rel="stylesheet" href="${_staticPath}/assets/css/ace-rtl.css"/>
<script src='https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js'></script>
<style>
    .loginRight {
        width: 340px;
        height: 400px;
        background-color: white;
        background-size: cover;
        background-repeat: no-repeat;
        float: left;
    }

</style>
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='${_staticPath}/assets/js/jquery.js'>" + "<" + "/script>");

</script>
<script type="text/javascript" src="${_staticPath}/custom/jquery.cookie.js"></script>
<script type="text/javascript" src="${_staticPath}/custom/jquery.form.min.js"></script>
<script type="text/javascript" src="${_staticPath}/custom/jquery.validate-2.0.min.js"></script>
<script type="text/javascript" src="${_staticPath}/custom/jquery.validate-2.0.custom.min.js"></script>
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {

        //验证是否存在错误消息
        var fail = '${errorMessage}';
        if (fail != null && fail != '') {
            toastr.options = {
                "positionClass": "toast-top-center",//弹出窗的位置
                "timeOut": "2000", //展现时间
            };
            toastr.error(fail);
        }

        //判断之前是否有设置cookie
        if ($.cookie('_account') != undefined) {
            $("#_account").val($.cookie('_account'));

            $("#_password").focus();
            $("#_rememberMe").attr("checked", true);
        } else {
            $("#_account").focus();
            $("#_rememberMe").attr("checked", false);
        }

        $('#btn-login-dark').on('click', function (e) {
            $('body').attr('class', 'login-layout');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-light').on('click', function (e) {
            $('body').attr('class', 'login-layout light-login');
            $('#id-text2').attr('class', 'grey');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-blur').on('click', function (e) {
            $('body').attr('class', 'login-layout blur-login');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'light-blue');

            e.preventDefault();
        });

        $("#_loginButton").click(function () {
            if ($('#_loginForm').validate()) {

                if ($('#_rememberMe:checked').length > 0) {
                    $.cookie('_account', $("#_account").val());
                } else {
                    $.removeCookie('_account');
                }
               $('#_loginForm').submit();
            }
        });

        // 回车绑定
        $(".form-data").bind('keypress', function (event) {
            if (event.keyCode == "13") {
                event.preventDefault();
                $("#_loginButton").click();
            }
        });
    });
</script>
</body>
</html>